<template>
  <div class="industry-university">
    <h2>产学研合作</h2>
    <div class="content">
      <div class="university-intro">
        <p>中空领航高度重视产学研合作，不断加强与国内外知名高校、科研院所的战略合作，联合培养高端人才，共同开展前沿技术研究，推动科研成果转化与应用，提升企业创新能力和核心竞争力。</p>
      </div>
      
      <div class="university-partners">
        <h3>合作院校</h3>
        <div class="partners-grid">
          <div class="partner-item" v-for="(partner, index) in partners" :key="index">
            <div class="partner-logo">
              <img :src="partner.logo" :alt="partner.name">
            </div>
            <h4>{{ partner.name }}</h4>
            <p>{{ partner.description }}</p>
          </div>
        </div>
      </div>
      
      <div class="cooperation-models">
        <h3>合作模式</h3>
        <div class="model-tabs">
          <div class="model-tab" v-for="(model, index) in cooperationModels" :key="index" :class="{ active: activeModelIndex === index }" @click="activeModelIndex = index">
            {{ model.name }}
          </div>
        </div>
        <div class="model-content" v-if="cooperationModels[activeModelIndex]">
          <h4>{{ cooperationModels[activeModelIndex].name }}</h4>
          <p>{{ cooperationModels[activeModelIndex].description }}</p>
          <ul>
            <li v-for="(point, pointIndex) in cooperationModels[activeModelIndex].points" :key="pointIndex">
              {{ point }}
            </li>
          </ul>
        </div>
      </div>
      
      <div class="research-projects">
        <h3>研究项目</h3>
        <div class="projects-list">
          <div class="project-item" v-for="(project, index) in researchProjects" :key="index">
            <div class="project-header">
              <h4>{{ project.title }}</h4>
              <span class="project-status" :class="project.status">{{ project.status === 'ongoing' ? '进行中' : '已完成' }}</span>
            </div>
            <div class="project-info">
              <p><strong>合作院校：</strong>{{ project.university }}</p>
              <p><strong>研究方向：</strong>{{ project.direction }}</p>
              <p><strong>项目简介：</strong>{{ project.description }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'IndustryUniversity',
  data() {
    return {
      activeModelIndex: 0,
      partners: [
        {
          name: '清华大学',
          logo: '/img/university/tsinghua.jpg',
          description: '与清华大学交通研究院合作，共同开展智能交通系统、自动驾驶等领域的前沿技术研究。'
        },
        {
          name: '北京交通大学',
          logo: '/img/university/bjtu.jpg',
          description: '与北京交通大学合作建设"智慧交通联合实验室"，开展交通大数据分析与应用研究。'
        },
        {
          name: '同济大学',
          logo: '/img/university/tongji.jpg',
          description: '与同济大学城市交通研究所合作，共同开展城市交通规划与智能交通管理系统研究。'
        },
        {
          name: '中国科学院',
          logo: '/img/university/cas.jpg',
          description: '与中科院计算技术研究所合作，共同研发人工智能在交通领域的应用技术。'
        },
        {
          name: '上海交通大学',
          logo: '/img/university/sjtu.jpg',
          description: '与上海交通大学电子信息与电气工程学院合作，共同开展交通信号控制与优化研究。'
        },
        {
          name: '香港理工大学',
          logo: '/img/university/polyu.jpg',
          description: '与香港理工大学合作，共同开展智慧物流与供应链管理的研究项目。'
        }
      ],
      cooperationModels: [
        {
          name: '联合实验室',
          description: '与高校共建联合实验室，开展关键技术研发和人才培养',
          points: [
            '共同投入资金和设备，建设研究平台',
            '企业提供实际应用场景和数据，高校提供理论支持和技术创新',
            '联合培养硕士、博士研究生',
            '共同申请国家重点研发计划和科技项目'
          ]
        },
        {
          name: '技术转化',
          description: '促进高校科研成果在企业的转化与应用',
          points: [
            '企业投资高校有产业化前景的科研项目',
            '共同开展技术成果转化和产业化',
            '共同申请专利和知识产权保护',
            '建立技术转移和孵化机制'
          ]
        },
        {
          name: '人才培养',
          description: '校企合作培养适应产业需求的高端人才',
          points: [
            '设立奖学金和研究基金',
            '提供实习和就业机会',
            '开展定制化人才培养计划',
            '企业专家参与教学和培养计划制定'
          ]
        },
        {
          name: '课题研究',
          description: '针对行业共性问题开展联合研究',
          points: [
            '企业提供研究课题和研究经费',
            '高校组织优秀研究团队开展研究',
            '定期举办学术交流和研讨会',
            '共同发表学术论文和研究报告'
          ]
        }
      ],
      researchProjects: [
        {
          title: '基于数字孪生技术的城市交通运行监测与优化系统',
          status: 'ongoing',
          university: '清华大学',
          direction: '数字孪生、城市交通',
          description: '研究数字孪生技术在城市交通监测与管理中的应用，构建交通运行全景感知与智能决策系统，提升城市交通管理效率和服务水平。'
        },
        {
          title: '交通信号灯智能控制与协同优化算法研究',
          status: 'completed',
          university: '上海交通大学',
          direction: '交通信号控制、人工智能',
          description: '基于深度强化学习的交通信号控制算法研究，实现多路口信号灯协同控制与优化，提高交通通行效率。'
        },
        {
          title: '面向智慧城市的交通大数据分析与挖掘技术',
          status: 'ongoing',
          university: '北京交通大学',
          direction: '大数据分析、交通预测',
          description: '研究海量交通数据的处理、分析与挖掘技术，开发交通状态预测与决策支持模型，为城市交通管理提供数据支撑。'
        },
        {
          title: '基于计算机视觉的交通场景感知与事件识别',
          status: 'ongoing',
          university: '中国科学院',
          direction: '计算机视觉、事件检测',
          description: '研究基于深度学习的交通场景理解与事件检测技术，实现交通流量统计、违法行为识别等功能，提高交通监管自动化水平。'
        },
        {
          title: '智能网联交通环境下的协同感知与决策技术',
          status: 'completed',
          university: '同济大学',
          direction: '车路协同、智能网联',
          description: '研究智能网联环境下的协同感知与决策技术，实现车辆与基础设施的信息共享与协同，提高交通系统的安全性和效率。'
        }
      ]
    };
  }
}
</script>

<style scoped>
.industry-university {
  padding: 20px 0;
}

.industry-university h2 {
  font-size: 24px;
  color: #333;
  margin-bottom: 30px;
  position: relative;
  padding-left: 15px;
}

.industry-university h2:before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 20px;
  background-color: #0056b3;
}

.university-intro {
  margin-bottom: 40px;
}

.university-intro p {
  font-size: 16px;
  line-height: 1.8;
  color: #555;
}

.university-partners,
.cooperation-models,
.research-projects {
  margin-bottom: 50px;
}

.university-partners h3,
.cooperation-models h3,
.research-projects h3 {
  font-size: 20px;
  color: #333;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eaeaea;
}

.partners-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.partner-item {
  text-align: center;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  transition: all 0.3s;
}

.partner-item:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transform: translateY(-5px);
}

.partner-logo {
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
}

.partner-logo img {
  max-width: 80%;
  max-height: 80px;
  object-fit: contain;
}

.partner-item h4 {
  font-size: 16px;
  color: #333;
  margin-bottom: 10px;
}

.partner-item p {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

.model-tabs {
  display: flex;
  margin-bottom: 20px;
  border-bottom: 1px solid #eaeaea;
}

.model-tab {
  padding: 10px 20px;
  cursor: pointer;
  transition: all 0.3s;
  color: #666;
  position: relative;
}

.model-tab.active {
  color: #0056b3;
  font-weight: 500;
}

.model-tab.active:after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #0056b3;
}

.model-content {
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.model-content h4 {
  font-size: 18px;
  color: #333;
  margin-bottom: 15px;
}

.model-content p {
  font-size: 15px;
  color: #555;
  line-height: 1.6;
  margin-bottom: 15px;
}

.model-content ul {
  padding-left: 20px;
}

.model-content ul li {
  margin-bottom: 8px;
  color: #666;
}

.projects-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.project-item {
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  border-left: 3px solid #0056b3;
}

.project-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.project-header h4 {
  font-size: 18px;
  color: #333;
}

.project-status {
  padding: 4px 10px;
  border-radius: 30px;
  font-size: 12px;
  font-weight: 500;
}

.project-status.ongoing {
  background-color: #e6f7ff;
  color: #0056b3;
}

.project-status.completed {
  background-color: #f6ffed;
  color: #52c41a;
}

.project-info p {
  margin-bottom: 8px;
  color: #666;
  line-height: 1.6;
}

@media (max-width: 992px) {
  .partners-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .partners-grid {
    grid-template-columns: 1fr;
  }
  
  .model-tabs {
    flex-wrap: wrap;
  }
  
  .model-tab {
    padding: 8px 15px;
  }
}
</style> 